<template>
	<div></div>
	</template>
	
	<script setup>
	import * as THREE from 'three';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	
	//创建场景
	const scene = new THREE.Scene();

	//创建相机
	const camera = new THREE.PerspectiveCamera();	
	camera.position.y = 3;
	camera.position.z = 10;
	
	//创建纹理
	const texture = new THREE.TextureLoader().load("1.png");

	//创建立体纹理  左右  上下 前后
	const  cubeTexture =  new THREE.CubeTextureLoader().setPath("/").load([
		'1.png','1.png',
		'1.png','1.png',
		'1.png','1.png']
	)

	scene.background = cubeTexture

	//创建立方体
	const geometry = new THREE.BoxGeometry(1,1,1);
	const material = new THREE.MeshBasicMaterial({
		map:texture
	});
	


	//网格
	const cube = new THREE.Mesh(geometry,material);
	cube.position.set(0,3,0)
	scene.add(cube);
	
	//添加网格地面
	const gridHelper = new THREE.GridHelper(10,10);
	scene.add(gridHelper);
	
	//创建渲染器
	const renderer = new THREE.WebGLRenderer()
	document.body.appendChild(renderer.domElement)
	//调整渲染器窗口大小
	renderer.setSize(window.innerWidth,window.innerHeight);
	
	//添加轨道控制器
	const controls = new OrbitControls(camera,renderer.domElement)
	//对轨道控制器改变时候监听
	controls.addEventListener('change',function() {
		console.log('触发change');
	})
	

	//renderer.render(scene,camera);
	
	
	function animate(){
		//告诉浏览器你希望执行一个动画
		requestAnimationFrame( animate);
		cube.rotation.x +=0.01;
		cube.rotation.y +=0.01;
		//轨道控制器更新
		controls.update();
		renderer.render(scene,camera);
	}
	animate();
	</script>
	
	<style>
	
	
	</style>
	